<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { approveOrderAppeal } from '@/api/expense'
import { getToken } from '@/utils/cache/cookies'
const dialogVisible = ref<boolean>(false)
const form = reactive({
  resolution: '',
  status: '0',
  orderAppealId: 0
})
const formRef = ref<FormInstance | null>(null)
const rules = reactive<FormRules>({
  resolution: [
    {
      required: true,
      message: '请输入原因',
      trigger: 'blur'
    }
  ]
})
const emits = defineEmits(['refresh'])
const reset = () => {
  dialogVisible.value = false
}
const handleClose = () => {
  formRef.value?.resetFields()
}
const submit = () => {
  formRef.value?.validate((valid) => {
    if (valid) {
      approve()
    }
  })
}
const approve = async () => {
  try {
    const res = await approveOrderAppeal({
      token: getToken() ?? '',
      orderAppealId: form.orderAppealId,
      resolution: form.resolution,
      status: form.status as '0' | '1'
    })
    if (res.statusCode === '0') {
      ElMessage.success(res.data)
      dialogVisible.value = false
      emits('refresh')
    }
  } catch (error) {
    console.error(error)
  }
}
const setData = (orderAppealId: number, status: '0' | '1') => {
  form.orderAppealId = orderAppealId
  form.status = status
}
const open = () => {
  dialogVisible.value = true
}
defineExpose({ open, setData })
</script>

<template>
  <el-dialog title="不通过原因" v-model="dialogVisible" width="500px" @close="handleClose" center>
    <el-form :model="form" ref="formRef" :rules="rules">
      <el-form-item prop="reason">
        <el-input
          type="textarea"
          v-model="form.resolution"
          :autosize="{ minRows: 10 }"
          placeholder="请输入原因"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button plain @click="reset">取消</el-button>
      <el-button type="primary" @click="submit">确认</el-button>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.el-dialog .el-dialog__body > .el-form {
  width: 100%;
}
</style>
